<template>
    <div class="main">
        <div class="item">
            <div class="list">
                <div class="leftImg">
                    <img src="../../assets/images/2.jpg" alt="">
                </div>
                <div class="rightCon">
                    <div class="top">
                     <div class="info">
                            <div class="name">君辰</div>
                        <div class="desc">专业、热情</div>
                     </div>
                     <div class="heart" @click="markBtn">
                     <img  v-if="markDown" src="../../assets/images/mark/heart2.png" alt="" >
                                <img  v-else src="../../assets/images/mark/heart1.png" alt="" >
                     </div>
                    </div>
                    <div class="mid">
                            <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                             
                            </div>
                              <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                            </div>
                              <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                            </div>
                              <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                            </div>
                    </div>
                    <div class="footer">
                        ￥<span>2280</span>/场
                    </div>
                </div>
            </div>
                 <div class="list">
                <div class="leftImg">
                    <img src="../../assets/images/meinv1.png" alt="">
                </div>
                <div class="rightCon">
                    <div class="top">
                     <div class="info">
                            <div class="name">君辰</div>
                        <div class="desc">专业、热情</div>
                     </div>
                     <div class="heart" @click="markBtn">
                     <img  v-if="markDown" src="../../assets/images/mark/heart2.png" alt="" >
                                <img  v-else src="../../assets/images/mark/heart1.png" alt="" >
                     </div>
                    </div>
                    <div class="mid">
                            <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                             
                            </div>
                              <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                            </div>
                              <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                            </div>
                              <div class="item">
                                <div class="title">资质年限</div>
                                <div class="num">12年</div>
                            </div>
                    </div>
                    <div class="footer">
                        ￥<span>2280</span>/场
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      markDown: 0
    };
  },
  methods: {
    markBtn() {
      if (this.markDown == 0) {
        this.markDown = 1;
      } else {
        this.markDown = 0;
      }
    }
  }
};
</script>
<style scoped>
.main {
  height: 100%;
  margin: 0 50px;
  background-color: #1c1c1c;
}
.item {
  padding-top: 20px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
.list {
  height: 210px;
  margin-bottom: 35px;
  display: flex;
  justify-content: space-between;
  background-color: #2a2a2a;
  padding: 5px 10px;
}
.list .leftImg img {
  width: 200px;
  height: 200px;
  padding: 5px;
    border-radius: 15px;
}
.list .rightCon {
  width: 100%;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.rightCon .top {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.rightCon .top .info .name {
  font-size: 16px;
  color: #fff;
  font-weight: 900;
}
.rightCon .top .info .desc {
  margin-top: 5px;
  font-size: 12px;
  color: #fff;
  border: 1px solid #5c5c5c;
  padding: 0 5px;
}
.rightCon .top .heart img {
  width: 35px;
  height: 35px;

}
.rightCon .mid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
.rightCon .mid .item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  text-align: center;
}
.rightCon .mid .item::after {
  content: "|";
  position: absolute;
  font-size: 30px;
  right: -10px;
  top: 35%;
  color: #5c5c5c;
  padding-left: 5px;
}
.rightCon .mid .item:last-child:after {
  content: "";
}
.rightCon .mid .item .title{
    font-size: 12px;
    color: #fff;
    opacity: .6;
}
.rightCon .mid .item .num{
    font-size: 16px;
        color: #fff;
        margin-top: -20px;
}
.rightCon .footer{
position: absolute;
left: 0;
bottom: 10px;
color: #fff;
font-size: 12px;
}
.rightCon .footer span{
    font-size: 18px;
    display: inline-block;
}
</style>

